<script>
export default {
  name: 'App',
  data() {
    return {
      todos: [
        {
          id: 1,
          title: 'learn vue',
          completed: false,
          isEdit: false
        },
        {
          id: 2,
          title: 'learn react',
          completed: true,
          isEdit: false
        }
      ],
      visibility: 'all'
    }
  },
  methods: {
    toggleTodo(e) {
      const checked = e.target.checked;
      this.todos.forEach(todo => todo.completed = checked)
    },
    delTodo(todo) {
      this.todos.splice(todo, 1)
    },
    addTodo(e) {
      const title = e.target.value.trim();
      if (title) {
        this.todos.unshift({id: Date.now(), title, completed: false})
      }
      e.target.value = ''
    },
    onHashChange(e) {
      const hash = window.location.hash.replace(/#\/?/, '');
      console.log(hash)
      if (['all', 'active', 'completed'].includes(hash)) {
        this.visibility = hash
      } else {
        this.visibility = 'all'
      }
    },
    clearCompletedTodo() {
      this.todos = this.todos.filter(todo => !todo.completed)
    },

  },
  computed: {
    filterTodo() {
      switch (this.visibility) {
        case 'all':
          return this.todos
        case 'active':
          return this.todos.filter(todo => !todo.completed)
        case 'completed':
          return this.todos.filter(todo => todo.completed)
      }
    },
    countTodo() {
      return this.todos.filter(todo => !todo.completed).length
    }
  },
  mounted() {
    window.addEventListener('hashchange', this.onHashChange);
    this.onHashChange()
  },

}
</script>

<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="What needs to be done?" @keyup.enter="addTodo">
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" @click="toggleTodo">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
        <li v-for="todo in filterTodo"
            :class="todo.completed"
            :key="todo.id">
          <div :class="{edit : todo.isEdit}" class="view">
            <input class="toggle" type="checkbox" v-model="todo.completed">
            <label @click="todo.isEdit = true">{{ todo.title }}</label>
            <button @click="delTodo(todo)" class="destroy"></button>
          </div>

          <input :class="{edit : !todo.isEdit}"
                 @keyup.enter="todo.isEdit = false"
                 type="text"
                 v-model="todo.title"/>

        </li>
      </ul>
    </section>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <footer v-if="this.todos.length" class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>{{ countTodo }}</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a :class="{selected:this.visibility ==='all'}" href="#/all">All</a>
        </li>
        <li>
          <a :class="{selected:this.visibility==='active'}" href="#/active">Active</a>
        </li>
        <li>
          <a :class="{selected:this.visibility==='completed'}" href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="clearCompletedTodo">Clear completed</button>
    </footer>
  </section>
</template>

<style scoped>
@import "https://unpkg.com/todomvc-app-css@2.4.1/index.css";

</style>
